<template>
  <div class="addRole">
      <!-- 面包屑 -->
      	<el-breadcrumb separator=">" class="crumbs">
      	  	<el-breadcrumb-item :to="{ path: '/role'}">角色查看</el-breadcrumb-item>
						<el-breadcrumb-item :to="{ path: '/role'}">添加角色</el-breadcrumb-item>
      	</el-breadcrumb>
      <!-- 添加用户的列表 -->
    <el-row  :gutter="20">
      <!-- <el-col :span="8" class="roleText roleStyle">角色编号</el-col><el-col class="roleStyle" :span="16"><el-input placeholder="请输入内容" v-model="roleId"></el-input></el-col> -->
      <el-col :span="8" class="roleText roleStyle">角色名称</el-col><el-col class="roleStyle" :span="16"><el-input  @keyup.native="delSpace('roleName')" placeholder="请输入内容" v-model="roleName"></el-input></el-col>
      <el-col :span="8" class="roleText roleStyle">角色描述</el-col><el-col class="roleStyle" :span="16"><el-input  @keyup.native="delSpace('roleDescription')" placeholder="请输入内容" v-model="roleDescription"></el-input></el-col>
    </el-row>
    <!-- 添加列表完成  以下是按钮 -->
    <el-row class="addUserBtn">
      <el-col :sm="9" :xs="6">&emsp;</el-col>
      <el-col :sm="3" :xs="6"><el-button type="primary" @click="save">保存</el-button></el-col>
      <el-col :sm="3" :xs="6"><el-button @click='cancel'>取消</el-button></el-col>
      <el-col :sm="9" :xs="6">&emsp;</el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'addRole',
  data () {
    return {
			roleName:'',
			roleDescription:''
    }
  },
  methods:{
    delSpace (str) {
      this[str]  = this[str].replace(/\s/g,"");
    },
		save() {
			var condition = {
				roleName:this.roleName,
				roleDescription: this.roleDescription
			};
			// 角色名称为空
			if(!condition.roleName){
				this.$message({
					showClose: true,
					message: '请填写角色名称',
					duration:1500,	
					type:'warning'
				});
				return
			}
			// 角色名称长度
			if(condition.roleName.length > 20){
				this.$message({
					showClose: true,
					message: '角色名称最多20个字符',
					duration:1500,	
					type:'warning'
				});
				return
			}
			// 描述长度
			if(condition.roleDescription.length > 40){
				this.$message({
					showClose: true,
					message: '角色描述最多40个字符',
					duration:1500,	
					type:'warning'
				});
				return
			}
			let loading = this.$loading({ lock: true, text: 'Loading···', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
			this.$http.post(this._path + '/role/insertRoleInfo',condition).then((res)=>{
				if('0000' == res.data.resultCode){
					this.$message({
						showClose: true,
						message: '添加成功',
						duration:1500,
						type: 'success'
					});
					loading.close()
					this.$router.push('/role')
				}else{
	                this.requestError(res,this)
	            }
			})
		},
		cancel ()  {
			this.$router.push('/role')
		}
	}
}
</script>

<style scoped lang="scss">
@import "./../style/addRole.scss"
</style>
